
<template>
  <h1>vue3一个人的信息</h1>
  <h1>姓名：{{person.name}}</h1>
  <h1>年龄：{{personage}}</h1>
  <br>
  <h1>工作种类：{{person.job.type}}</h1>
  <h1>工作薪水：{{person.job.salary}}</h1>
  <h1>爱好：{{person.hobby}}</h1>
  <button @click="changeInfo">修改个人信息</button>

</template>
<script>
import {ref,reactive} from 'vue'
export default {
  /**
   * reactive
   * 格式化一版
   *
   *
   */
  name: 'demo2',
  // // 测试 ，暂时不考虑响应式
  setup(){
    let person_template ={
      name: '张三',
      age: 18,
      job:{
        type:'前端工程师',
        salary:'40k'
      },
      hobby: [`抽烟`,`喝酒`,`烫头`]
    }
    let hobby = reactive([`抽烟`,`喝酒`,`烫头`])
    let person = reactive(person_template)

    function changeInfo(){
      console.log(person)
      person.job.type=`UI设计师`
      // vue3 由于使用了 proxy 可以直接改 vue2不可以
      person.hobby[0] = `学习`
    }
    return{
      person,
      changeInfo
    }
  },

}
</script>
<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
